<template>
	<view class="big-box" :style="{'min-height': minHeight}">
		<view class="change-time">
			<view style="width: 50rpx;text-align: center;"><u-icon v-show="leftVisible" name="arrow-left" @click="changeTime(1)"/></view>
			<view v-if="dataList.length">
				{{dataList[dataIndex].termStartDate.replaceAll("-",".")+"-"+dataList[dataIndex].termEndDate.replaceAll("-",".")}}
			</view>
			<view style="width: 50rpx;text-align: center;"><u-icon v-show="rightVisible" name="arrow-right" @click="changeTime(2)"/></view>
		</view>
		<view class="item-box">
			<view class="item" v-if="cert">
				<view class="item-top">
					<view class="item-top-left">
						<view class="item-top-left-top">
							{{cert.cert_arr[0].term_start_date}}-{{cert.cert_arr[0].term_end_date}}
						</view>
						<view class="item-top-left-buttom">
							<text style="border:1rpx solid #fff;'line-height': '40rpx'">{{cert.porson_name}}</text>
							<text
								:style="{
									'font-size': '20rpx',
									'border-radius': '3px',
									'box-sizing':'border-box',
									'padding': '2rpx 10rpx',
									color: cert.status === '01' ? '#00c99a':cert.status === '02'? '#ff4d4f' :'#fd8b35',
									background:cert.status === '01' ? '#e8faf6':cert.status === '02'? '#ffefef' :' #fef0e6',
									border:cert.status === '01' ? '1rpx solid #00c99a':cert.status === '02'? '1rpx solid #ff4d4f;' :'1rpx solid #fd8b35',
									'line-height': '40rpx'
								}"
							>{{cert.status != '-1' ? status[cert.status] : '已过期'}}</text>
						</view>
					</view>
					<view class="item-top-right">
						<u-circle-progress 
							active-color="#00ca9a"
							:percent="cert.cert_arr[0].percentage"
							:width='130'
							:border-width="15"	
						>
							<view class="u-progress-content">
								<text class='u-progress-info'>{{cert.cert_arr[0].percentage}}%</text>
							</view>
						</u-circle-progress>
					</view>
				</view>
				<view class="item-buttom">
					<view class="item-buttom-middle">证书编号：{{cert.cert_number || "暂无"}}</view>
					<view class="item-buttom-middle">关联企业：{{cert.e_name || "暂无"}}</view>
					<view class="item-buttom-middle">有效期截止日：{{cert.cert_end_date}}</view>
					<view class="item-buttom-line"></view>
					<view class="item-buttom-day">
						<view class="item-buttom-day-item">
							<view class="item-buttom-day-num">
								{{cert.cert_arr[0].xu_score ? cert.cert_arr[0].xu_score : "--"}}
							</view>
							<view class="item-buttom-day-cns">
								应修学时
							</view>
						</view>
						<view class="item-buttom-day-item">
							<view class="item-buttom-day-num">
							{{cert.cert_arr[0].already_score || 0}}
							</view>
							<view class="item-buttom-day-cns">
								已修学时
							</view>
						</view>
						<view class="item-buttom-day-item">
							<view class="item-buttom-day-num">
								{{cert.cert_arr[0]
									?(cert.cert_arr[0].xu_score - cert.cert_arr[0].already_score).toFixed(1) > 0
										? (cert.cert_arr[0].xu_score - cert.cert_arr[0].already_score).toFixed(1)
										:0
									:''
								}} 
							</view>
							<view class="item-buttom-day-cns">
								剩余应修
							</view>
						</view>
						<view class="item-buttom-day-item">
							<view class="item-buttom-day-num">
								{{cert.cert_arr[0].day  || 0}}
							</view>
							<view class="item-buttom-day-cns">
								剩余天数
							</view>
						</view>
					</view>
				</view>
				<veiw 
					v-if="cert.cert_arr[0].is_xuexi === 1" 
					style="
						margin-top: 20px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 30rpx;
					"
				>
					<view 
						@click="toStudy(cert)"
						style="width: 50%;
						color: #fff;
						background-color: #00ca9a;
						height: 40px;
						line-height: 40px;
						text-align: center;
						border-radius: 20px;"
					>去学习</view>
				</veiw>
			</view>
		</view>
		<view class="second-title" v-if="recordList.length">
			学习记录
		</view>
		<view class="detail-box">
			<view class="detail-item-box" v-for="(item) in recordList" :key="item.cert_id">
				<view class="item-top">
					<text>{{item.date}}</text>
					<text>+{{item.score_all}}学时</text>
				</view>
				<view class="item-detail" v-for="(itm,index) in item.data" :key="itm.cert_id">
					<text>{{itm.title}}</text>
					<text>+{{itm.get_score}}学时</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/pagesB/common/js/request/userInfo.js';
	export default {
		data() {
			return {
				status:{
					'01':"有效",
					'02':"暂扣",
					'03':"撤销" ,
					'04':"注销", 
					"05":'吊销' ,
					'06':"失效",
					'07':"跨省调出",
					'08':"履职检查不合格",
					"10":"假章注销",
					"11":"社保证明造假",
					"12":"假身份证",
					"13":"假平安卡",
					"14":"特殊注销",
					'99':"其它"
				},
				cert:undefined,
				dataList:[],
				dataIndex:0,
				page:{
					page:1,
					pageSize:10
				},
				minHeight:{},
				recordList:[],
				rightVisible:true,
				leftVisible:true,
				type:0
			}
		},
		onPullDownRefresh(){
			setTimeout(()=>uni.stopPullDownRefresh (),5000)
			this.page.page = 1
			this.page.pageSize = 10
			this.recordList = []
			this.getScoreLogWx()
			this.getCerTificatePage()
		},
		onReachBottom(){
			if(this.count === this.recordList.length){
				
			}else{
				this.page.page=this.page.page+1
				this.getScoreLogWx()
			}
		},
		onLoad({cert_id,cert_term_id,type}){
			uni.getSystemInfo({
				success: (res) => {
					this.minHeight = res.windowHeight+ 20 +'px'
				}
			})
			this.cert_id = cert_id
			this.term_id = cert_term_id;
			this.type = type
			request.getScoreDate({
				data:{ cert_id : this.cert_id, },
				success:(resp) => {
					this.dataList = resp
					this.dataIndex = resp.findIndex(item => item.id == this.term_id)
					this.getCerTificatePage()
					this.showLeftRight()	
					this.getScoreLogWx()
				}
			})
		},
		methods:{
			//判断左右按钮的显示
			showLeftRight(){
				//没数据或者长度为0都不显示哦
				if(this.dataList.length == 1 || this.dataList.length == 0){
					this.rightVisible = false
					this.leftVisible = false
					return
				}
				//判断位置显示
				if (this.dataIndex == 0) {
					this.rightVisible = true
					this.leftVisible = false
				} else if (this.dataList.length - 1 == this.dataIndex){
					this.rightVisible = false
					this.leftVisible = true
				}else{
					this.rightVisible = true
					this.leftVisible = true
				}
			},
			changeTime(type){
				this.page.page = 1
				if(type===2){
					if(this.dataIndex < (this.dataList.length-1)){
						this.dataIndex = this.dataIndex+1
					}
				}else{
					if(this.dataIndex > 0){
						this.dataIndex = this.dataIndex-1
					}
				}
				this.showLeftRight()	
				this.recordList = []
				this.getScoreLogWx()
				this.getCerTificatePage()
			},
			toStudy(cert){
				uni.navigateTo({
					url:`/pagesB/pages/newCourseList/index?cert_id=${cert.cert_id}&term_id=${cert.cert_arr[0].cert_term_id}`
				})
			},
			getCerTificatePage(){
				request.getCertificatePageList({
					data:{
						cert_id : this.cert_id,
						term_id : this.dataList[this.dataIndex].id,
						type : this.type
					},
					success:(res) => {
						this.cert = res.list[0]
					},
					fail:(err) => { }
				})
			},
			getScoreLogWx(){
				request.getScoreLogWx({
					data:{
						cert_id:this.cert_id,
						term_id:this.dataList[this.dataIndex].id,
						...this.page
					},
					success:(res) => {
						uni.stopPullDownRefresh()
						this.count = res.count
						this.recordList = [ ...this.recordList,...res.list ]
					},
					fail:(err) => { }
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.change-time{
		box-sizing: border-box;
		padding: 26rpx 24rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: DINPro, DINPro-Medium;
		font-weight: 500;
		color: rgba(0,0,0,0.85);
		line-height: 40rpx;
	}
	.big-box{
		background-color: #F7F7F7;
	}
	.item-box{
		box-sizing: border-box;
		padding:0 24rpx ;
		.item{
			padding-bottom:32rpx;
			border-radius: 18rpx;
			background-color: #fff;
			.item-top{
				display: flex;
				justify-content: space-evenly;
			}
			.item-top-left{
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
			}
			.item-top-left-top{
				text-align: center;
				box-sizing: border-box;
				padding: 0 24rpx;
				border-radius: 18rpx 0 18rpx 0;
				font-size: 24rpx;
				font-family: PingFangSC, PingFangSC-Medium;
				font-weight: 500;
				color: #00ca9a;
				background: #e0f8f2;
				line-height: 56rpx;
			}
			.item-top-left-buttom{
				margin-top: 32rpx;
				margin-bottom: 32rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFangSC-Medium;
				font-weight: 500;
				color: rgba(0,0,0,0.85);
				line-height: 42rpx;
				box-sizing: border-box;
				padding-left: 32rpx;
				text{
					margin-right: 16rpx;
				}
			}
			.item-top-right{
				display: flex;
				padding-right: 40rpx;
				justify-content: center;
				align-items: center;
			}
		}
		
		.item-buttom{
			box-sizing: border-box;
			padding: 0 32rpx;
			.item-buttom-middle{
				font-size: 26rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #7f7f7f;
				margin-bottom: 20rpx;
				line-height: 36rpx;
			}
			.item-buttom-middle-tost{
				font-size: 24rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #ff4d4f;
				line-height: 32rpx;
			}
			.item-buttom-line{
				border: 1rpx dashed #d3d3d3;
				margin: 29rpx 0;
			}
			.item-buttom-day{
				display: flex;
				justify-content: space-between;
			}
			.item-buttom-day-item{
				flex: 1;
			}
			.item-buttom-day-num{
				font-size: 34rpx;
				font-family: DINPro, DINPro-Medium;
				font-weight: 500;
				color: #262626;
				line-height: 44rpx;
				text-align: center;
			}
			.item-buttom-day-cns{
				text-align: center;
				font-size: 22rpx;
				font-family: PingFangSC, PingFangSC-Regular;
				font-weight: 400;
				color: #7f7f7f;
				line-height: 30rpx;
				margin-top: 15rpx;
			}
			
		}
		
		
	}
	.second-title{
		box-sizing: border-box;
		padding: 16rpx 24rpx;
		font-size: 34rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		color: #262626;
		line-height: 48rpx;
	}
	.detail-box{
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		.detail-item-box{
			box-sizing: border-box;
			padding: 34rpx 32rpx;
			background-color: #fff;
			border-radius: 18rpx;
			margin-bottom: 20rpx;
		}
		.item-top{
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: PingFangSC, PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			color: rgba(0,0,0,0.85);
			line-height: 40px;
		}
		.item-detail{
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			color: #7f7f7f;
			line-height: 30px;
		}
	}
</style>